<template>
  <div>
    <!-- 头部菜单区 -->
    <div class="xhy-navbar">
      <div class="container">
        <div class="navbar navbar-expand-lg navbar-light">
          <!-- logo -->
          <a href="#" class="navbar-brand">
            <img src="/img/index/header/hender-logo.jpg" alt="" />
          </a>
          <!-- 响应式小菜单 -->
          <button
            class="navbar-toggler"
            data-toggle="collapse"
            data-target="#xhymenu"
          >
            <span class="navbar-toggler-icon"> </span>
          </button>
          <!-- 小菜单连接的大菜单 -->
          <div
            id="xhymenu"
            class="collapse navbar-collapse justify-content-between"
          >
            <!-- 搜索 -->
            <div class="xhy-search bg-white">
              <input type="text" placeholder="搜索" v-model="str" @keyup.13="search" @input="fun" v-my-focus />
              <img src="/img/index/header/sousuo.png" alt="" class="border" @click="search"/>
            </div>
            <!-- 选项组 -->
            <div class="xhy-mlist breadcrumb bg-transparent">
              <a href="#" class="breadcrumb-item">
                <img src="/img/index/header/care.png" alt="" />
              </a>
              <a href="" class="breadcrumb-item">
                <img src="/img/index/header/order.png" alt="" />
              </a>
              <a href="" class="breadcrumb-item">
                <img src="/img/index/header/shop_car.png" alt="" />
              </a>
              <a href="#" class="breadcrumb-item" target="_black"
                >注册</a
              >
              <a href="#" class="breadcrumb-item" @click="open('login')">登录</a>
              <login v-show="show=='login'" :close="close"></login>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="logo">
      <img src="/img/index/logo.png" alt="" />
    </div>

    <!-- 导航栏 -->
    <div class="container">
      <div class="header d-flex justify-content-between">
        <div>
          <a href="#" class="active">首页</a>
          <a href="#" class="mr-5">我要点餐</a>
          <a href="#" class="mr-5">加入我们</a>
          <a href="#" class="mr-5">关于我们</a>
        </div>
        <div>
          <a href="#">
            <img src="/img/index/header/zuoji.png" alt="" class="mr-3" />
            <p class="d-inline mr-3">服务热线：</p>
            <span>15752250247</span>
          </a>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="xhy-carousel">
      <div class="container">
        <!-- 轮播外层 -->
        <div id="banner" class="carousel slide" data-ride="carousel">
          <!-- 展示图区域 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img
                src="/img/index/carousel/1.jpg"
                alt=""
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="/img/index/carousel/2.jpg"
                alt=""
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="/img/index/carousel/3.jpg"
                alt=""
                class="d-block w-100"
              />
            </div>
            <div class="carousel-item">
              <img
                src="/img/index/carousel/5.jpg"
                alt=""
                class="d-block w-100"
              />
            </div>
          </div>
          <!-- 左右切换按钮 -->
          <a
            href="#banner"
            class="carousel-control-prev xhy-zy"
            data-slide="prev"
          >
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a
            href="#banner"
            class="carousel-control-next xhy-zy"
            data-slide="next"
          >
            <span class="carousel-control-next-icon"></span>
          </a>
          <!-- 指示符区域 -->
          <ul class="carousel-indicators xhy-zsf">
            <li data-target="#banner" data-slide-to="0" class="active"></li>
            <li data-target="#banner" data-slide-to="1"></li>
            <li data-target="#banner" data-slide-to="2"></li>
            <li data-target="#banner" data-slide-to="3"></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 服务区域 -->
    <div class="xhy-service">
      <div class="container">
        <div class="service bg-light text-center mt-2 mb-2">
          <img src="/img/index/service.png" alt="" class="w-50" />
        </div>
        <div class="row">
          <div class="xhy-index-r1 col-lg-5 col-12">
            <div class="bg-light w-100 h-100">
              <div class="item text-center">
                <a href="">
                  <img src="/img/index/service/nimeng.png" alt="" />
                  <span class="h3">柠檬时代</span>
                </a>
              </div>
              <div class="item text-center">
                <a href="">
                  <img src="/img/index/service/shitang.png" alt="" />
                  <span class="h3">食堂外卖</span>
                </a>
              </div>
              <div class="item text-center">
                <a href="">
                  <img src="/img/index/service/qingshi.png" alt="" />
                  <span class="h3">寝室超市</span>
                </a>
              </div>
              <div class="item text-center">
                <a href="">
                  <img src="/img/index/service/naicha.png" alt="" />
                  <span class="h3">奶茶甜点</span>
                </a>
              </div>
              <div class="item text-center">
                <a href="">
                  <img src="/img/index/service/shuiguo.png" alt="" />
                  <span class="h3">水果生鲜</span>
                </a>
              </div>
            </div>
          </div>
          <div class="xhy-index-r1 col-lg-7 col-12">
            <div class="bg-light w-100 h-100 xhy-phone">
              <img src="/img/index/phone_carousel/ningmong.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户商家 -->
    <div class="container">
      <div class="bg-light mt-2 mb-2">
        <div class="brand"></div>
        <h4 class="text-center">小红院，我们共同的家园</h4>
        <p class="text-center">春夏秋冬、红院陪你，一日三餐、有我就好</p>
      </div>
      <div>
        <div class="row">
          <div class="xhy-brand col-lg-6 col-12">
            <div class="bg-light w-100 h-100">
              <h4 class="text-center h3">红孩儿专属</h4>
              <div>
                <h5 class="text-center text-danger font-weight-bold">
                  相约红院，乐享美食
                </h5>
                <p class="pl-3 pr-3 bg-success rounded">
                  红院外卖是专门为红河学院师生服务的一个外卖平台，上面所有商品均送餐到寝！如果你也是红河学院的一员，就来红院外卖吧，让我们一起相约红院，赏红院美景，品红院美食。
                </p>
              </div>
              <div class="row">
                <div class="col-12 xhy-student">
                  <div class="d-flex justify-content-center flex-wrap">
                    <div class="mr-4">
                      <img src="/img/index/spring.jpg" alt="" class="rounded" />
                      <p class="text-center h4">春季</p>
                    </div>
                    <div>
                      <img src="/img/index/summer.jpg" alt="" class="rounded" />
                      <p class="text-center h4">夏季</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 xhy-student">
                  <div class="d-flex justify-content-center flex-wrap">
                    <div class="mr-4">
                      <img src="/img/index/autumn.jpg" alt="" class="rounded" />
                      <p class="text-center h4">秋季</p>
                    </div>
                    <div>
                      <img src="/img/index/winter.jpg" alt="" class="rounded" />
                      <p class="text-center h4">冬季</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="xhy-brand col-lg-6 col-12">
            <div class="bg-light w-100 h-100">
              <h4 class="text-center h3">特色美食</h4>
              <div class="row">
                <div class="col-12">
                  <div class="xhy-shop d-flex justify-content-center">
                    <div>
                      <img
                        src="/img/index/shop/food1.jpg"
                        alt=""
                        class="mr-4"
                      />
                      <h5 class="text-center h4">过桥米线</h5>
                      <h6 class="text-center">￥19.9</h6>
                    </div>
                    <div>
                      <img src="/img/index/shop/food2.jpg" alt="" />
                      <h5 class="text-center h4">冰稀饭</h5>
                      <h6 class="text-center">￥19.9</h6>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="xhy-shop d-flex justify-content-center">
                    <div>
                      <img
                        src="/img/index/shop/food3.jpg"
                        alt=""
                        class="mr-4"
                      />
                      <h5 class="text-center h4">竹筒饭</h5>
                      <h6 class="text-center">￥19.9</h6>
                    </div>
                    <div>
                      <img src="/img/index/shop/food4.jpg" alt="" />
                      <h5 class="text-center h4">汽锅鸡</h5>
                      <h6 class="text-center">￥19.9</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <div class="xhy-footer mt-3">
      <div class="container">
        <div class="footer-bg">
          <div class="row">
            <!-- 左侧块 -->
            <div class="col-lg-6 col-12 mt-3 mb-2">
              <div class="row">
                <ul class="col-4 list-unstyled text-center">
                  <li class="h5"><a href="#">买家帮助</a></li>
                  <li><a href="#">新手指南</a></li>
                  <li><a href="#">服务保障</a></li>
                  <li><a href="#">常见问题</a></li>
                </ul>
                <ul class="col-4 list-unstyled text-center">
                  <li class="h5"><a href="#">商家帮助</a></li>
                  <li><a href="#">商家入驻</a></li>
                  <li><a href="#">商家后台</a></li>
                </ul>
                <ul class="col-4 list-unstyled text-center">
                  <li class="h5"><a href="#">联系我们</a></li>
                  <li>
                    <a href="" class="d-flex">
                      <img src="/img/index/footer/shouji.png" alt="" />
                      <span>15752250247</span>
                    </a>
                  </li>
                  <li>
                    <a href="" class="d-flex">
                      <img src="/img/index/footer/weixin.png" alt="" />
                      <span>wz304384</span>
                    </a>
                  </li>
                  <li>
                    <a href="" class="d-flex">
                      <img src="/img/index/footer/youxiang.png" alt="" />
                      <span>3043848963@qq.com</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 右侧块 -->
            <div class="col-lg-6 col-12 mt-3 mb-2">
              <div class="float-left d-flex">
                <p class="h5">更多商家，更多优惠:</p>
                <div>
                  <p>APP</p>
                  <img src="" alt="" />
                </div>
                <div>
                  <p>小程序</p>
                  <img src="" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 菜单区域 */
/* 搜索区域两个规格768以下以上，只限制长度的改变 */
@media (max-width: 768px) {
  .xhy-search {
    width: 50% !important;
    margin: 20px 0 10px 0;
  }
}
.xhy-navbar {
  background-color: #90c322;
}
.navbar-brand img {
  width: 50px;
  border-radius: 50%;
}
.xhy-search {
  width: 45%;
  height: 34px;
}
.xhy-search input {
  width: 80%;
  border: 0;
  outline: none;
  float: left;
  height: 100%;
}
.xhy-search img {
  float: right;
}
.xhy-mlist .breadcrumb-item + .breadcrumb-item::before {
  content: "|";
}
.xhy-mlist a {
  color: #fff;
}

.logo {
  text-align: center;
  background-color: #f8f8f8;
}

/* 导航栏 */
.header {
  height: 50px;
  line-height: 50px;
  background-color: #90c322;
}
.header a {
  margin-left: 20px;
  color: #fff;
}
.header .active {
  background-color: #008c8c;
  padding: 5px 10px;
  border-radius: 5px;
}
.header span {
  margin-right: 20px;
}

/* 轮播图 */
.carousel-item img {
  height: 500px;
}
.xhy-zy {
  width: 50px;
  height: 100px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  top: 50%;
  transform: translateY(-50%);
}
.xhy-zsf li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #90c322;
}
.xhy-zsf .active {
  background-color: #008c8c;
}

/* 服务区域 */
.xhy-phone {
  background-image: url(/img/index/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 100%;
  position: relative;
}
.xhy-phone img {
  width: 340px;
  height: 590px;
  position: absolute;
  top: 110px;
  right: 124px;
  border: 1px solid #dfe0e1;
}

.xhy-index-r1 {
  height: 1000px;
}

/* brand区域 */
.brand {
  height: 100px;
  background-image: url(/img/index/drand.png);
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}
.brand + h4 {
  margin-top: -30px;
}

.xhy-zs {
  width: 500px;
}
.xhy-student img {
  width: 200px;
  height: 200px;
}
.xhy-shop img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* 页尾区域 */
.footer-bg {
  background-color: #dfe0e1;
}

.xhy-footer a {
  color: black;
}
</style>

<script>
import Login from "../components/Login"
export default {
  data(){
    return{
      str:"",
      show:"",
      
    }
  },
  components:{ 
    Login
  },
  methods:{
    search(){
      console.log(`搜索${this.str}`);
    },
    fun(e){
      this.str=e.target.value;
    },
    open(name){
      this.show=name;
    },
    close(){
      this.show="";
    }
  },
  watch:{
    str(){
      this.search();
    }
  },

  
}
</script>
